<template>
  <div class="">
    <van-nav-bar title="个人中心" left-arrow @click-left="$router.back()" />
    <van-cell title="头像" @click="$router.push('/toux')">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <img class="img" :src="userInfoData.avatar" alt="" />
        <van-icon name="arrow" size="20px" class="search-icon" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      @click="$router.push('/editMyinfo')"
      is-link
      :value="userInfoData.user_nickname"
    />

    <van-cell title="手机号码" :value="userInfoData.tel" />
    <van-cell
      @click="$router.push('/editSex')"
      title="性别"
      is-link
      :value="
        userInfoData.sex == 0 ? '男' : userInfoData.sex == 1 ? '女' : '保密'
      "
    />
    <van-cell
      @click="datePicker = true"
      title="出生日期"
      is-link
      :value="userInfoData.birthday ? userInfoData.birthday : '请选择'"
    />
    <van-cell
      @click="sareashow = true"
      title="地区"
      is-link
      :value="
        userInfoData.province_name
          ? userInfoData.province_name +
            userInfoData.city_name +
            userInfoData.area_name
          : '请选择'
      "
    />
    <van-cell
      @click="showPicker = true"
      title="年级"
      is-link
      :value="userInfoData.grade_name ? userInfoData.grade_name : '请选择'"
    />
    <van-cell
      @click="$router.push('/xuanzexuexiao')"
      title="报考学校"
      is-link
      :value="userInfoData.school_name ? userInfoData.school_name : '请填写'"
    />
    <van-cell
      @click="$router.push('/baokaozhuanye')"
      title="报考专业"
      is-link
      :value="userInfoData.major ? userInfoData.major : '请选择'"
    />
  </div>
  <!-- 年级 -->
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      title="标题"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </van-popup>
  <!-- 年月日 -->
  <van-popup v-model:show="datePicker" round position="bottom">
    <van-datetime-picker
      @cancel="dateCancel"
      @confirm="dateConfirm"
      v-model="currentDate"
      type="date"
      title="选择年月日"
    />
  </van-popup>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useRoute } from 'vue-router'
import { getUserInfoApi, editUserNameApi } from '@/http/api'

export default {
  setup() {
    const currentDate = ref(new Date(2021, 0, 17))
    const showPicker = ref(false)
    const datePicker = ref(false)
    const route = useRoute()
    const store = useCounterStore()
    const data = reactive({
      userInfoData: {},
      nainjiArr: [],
      columns: []
    })
    onMounted(() => {
      getInfo()
    })

    // 获取个人信息
    const getInfo = async () => {
      const res = await getUserInfoApi(store.res.id)

      data.userInfoData = res
      console.log(data.userInfoData)
      let newArr = []
      for (let i in data.userInfoData.grade.list) {
        newArr.push(data.userInfoData.grade.list[i])
      }
      data.columns = [...newArr]
    }
    // 年级确定事件
    const onConfirm = async (value, index) => {
      console.log(index + 1)
      let grade_id = index + 1
      let id = data.userInfoData.user_id
      const res = await editUserNameApi({ grade_id, id })
      console.log(res)
      showPicker.value = false
      getInfo()
    }
    // 年级弹出框个关闭
    const onCancel = () => {
      showPicker.value = false
    }
    // 出生日期
    const dateConfirm = async (val) => {
      let obj = {
        birthday: new Date(val).toLocaleDateString().replace(/\//g, '-'),
        grade_id: data.userInfoData.grade_id,
        id: data.userInfoData.user_id
      }
      console.log(obj)
      const res = await editUserNameApi(obj)
      console.log(res)
      datePicker.value = false
      getInfo()
    }

    // 关闭出生日期模态框
    const dateCancel = () => {
      datePicker.value = false
    }
    return {
      ...toRefs(data),
      onCancel,
      onConfirm,
      store,
      showPicker,
      currentDate,
      dateConfirm,
      datePicker,
      dateCancel
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: -10px;
  margin-right: 10px;
}
</style>
